<template>
	<div class="page">
		<div class="content">
			<div class="title">温州木材供应链管理平台数据概览</div>
			<div class="flex-row">
				<div class="flex-column">
					<div class="block1">
						<div v-for="(item, index) in progressData" :key="index">
							<div class="flex-column ">
								<div class="text1">{{ item.title }}</div>
								<div class="progress_text1" :style="{ color: item.color }">
									{{ item.data }}
								</div>
							</div>
							<!-- <div
                class="flex-row flex-alignCenter"
                style="margin-bottom: 0.1rem"
              >
                <el-progress
                  :text-inside="true"
                  :show-text="false"
                  :percentage="item.percentage"
                  :color="item.color"
                  class="progress flex-alignCenter"
                ></el-progress>
              </div> -->
						</div>
					</div>
					<div class="block1">
						<div class="title2">进口合同情况汇总</div>
						<div v-for="(item, index) in progressData2" :key="index">
							<div class="flex-row flex-alignCenter">
								<div class="text1">{{ item.title }}</div>
								<div class="progress_text1" :style="{ color: item.color }">
									{{ item.data }}
								</div>
							</div>
						</div>
					</div>
					<div class="block1">
						<div class="title2">销售合同临期提醒</div>
						<div class="itemWrap" ref="scrollWrap">
							<div class="item" v-for="item in saleContractData" :key="item.id">
								<div class="">
									{{ item.fundRecoveryDate }}
									{{ item.contractCode }}
									{{ item.customerName }}
								</div>
							</div>
						</div>
					</div>
					<!-- <div class="block1">
						<div id="main" class="chart1"></div>
					</div> -->
					<!-- 进口各国品种比例 -->
					<!-- <div class="block1">
						<div id="main2" class="chart1"></div>
					</div> -->
					<!-- 进口各国品种比例 end-->
				</div>
				<div class="flex-column">
					<div class="block2">
						<div class="chartMap" id="chartMap"></div>
					</div>
					<!-- 销售金额 -->
					<div class="block4">
						<div class="title3">累计金额:{{main3Total}}万</div>
						<div id="main3" class="chart3"></div>
					</div>
					<!-- 销售金额 -->
				</div>
				<div class="flex-column">
					<div class="block3">
						<div id="main4" class="chart2"></div>
					</div>
					<!-- <div class="block3">
						<div id="main5" class="chart2"></div>
					</div> -->
					<div class="block3">
						<div id="main6" class="chart6"></div>
					</div>
					<!-- 预收款明细 -->
					<div class="block5">
						<div class="title3">月累计金额:{{main7Total}}万</div>
						<div id="main7" class="chart3"></div>
					</div>
					<!-- 预收款明细 end -->
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Tabs from '@/components/common/tabs';
import Uploads from '@/components/common/uploads';
import LookTable from '@/components/common/lookTable';
import city_map_full from '../../assets/city_map_full.json';

export default {
	components: {
		Tabs,
		Uploads,
		LookTable,
	},
	data() {
		return {
			option: {
				title: {
					text: '客户订购后欠款情况(万元)',
					top: 0,
					left: 0,
					textStyle: {
						color: '#fff',
						fontSize: '0.2rem',
					},
				},
				color: ['#01ECF7', '#E8BE1A', '#F42A7D', '#018BE7', '#0153BA'],
				tooltip: {
					trigger: 'item',
				},
				legend: {
					right: 'right',
					bottom: '0',
					textStyle: {
						color: '#fff',
						fontSize: '0.2rem',
					},
				},
				series: [
					{
						left: '-40%',
						bottom: '-10%',
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center',
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '0.1rem',
								fontWeight: 'bold',
							},
						},
						labelLine: {
							show: false,
						},
						data: [],
					},
				],
			},
			option2: {
				title: {
					text: '进口国别的品种比例',
					top: 0,
					left: 0,
					textStyle: {
						color: '#fff',
						fontSize: '0.2rem',
					},
				},
				color: ['#01ECF7', '#E8BE1A', '#F42A7D', '#018BE7', '#0153BA'],
				tooltip: {
					trigger: 'item',
				},
				legend: {
					right: 'right',
					bottom: '0',
					textStyle: {
						color: '#fff',
						fontSize: '0.2rem',
					},
				},
				series: [
					{
						left: '-40%',
						bottom: '-10%',
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center',
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '0.1rem',
								fontWeight: 'bold',
							},
						},
						labelLine: {
							show: false,
						},
						data: [
							{ value: 1048, name: 'Search Engine' },
							{ value: 735, name: 'Direct' },
							{ value: 580, name: 'Email' },
							{ value: 484, name: 'Union Ads' },
							{ value: 300, name: 'Video Ads' },
						],
					},
				],
			},
			option3: {
				color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
				title: {
					text: new Date().Format('yyyy') + '年销售金额(万)',
					textStyle: {
						color: '#fff',
						fontSize: '0.2rem',
					},
				},

				xAxis: [
					{
						type: 'category',
						boundaryGap: false,
						data: [],
						axisLine: {
							lineStyle: {
								color: '#fff',
								fontSize: '0.2rem',
							},
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#fff',
								fontSize: '0.2rem',
							},
						},
					},
				],

				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985',
						},
					},
				},
				legend: {
					left: '20%',
					data: [],
					textStyle: {
						color: '#fff',
						fontSize: '0.1rem',
					},
				},

				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				series: [
					{
						name: '',
						type: 'line',
						stack: 'Total',
						smooth: true,

						showSymbol: false,
						label: {
							show: true,
							position: 'top',
						},

						emphasis: {
							focus: 'series',
						},
						data: [],
					},
				],
			},
			option7: {
				color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
				title: {
					text: '预收款明细(万)',
					textStyle: {
						color: '#fff',
						fontSize: '0.2rem',
					},
				},

				xAxis: [
					{
						type: 'category',
						boundaryGap: false,
						data: [],
						axisLine: {
							lineStyle: {
								color: '#fff',
								fontSize: '0.2rem',
							},
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						axisLine: {
							lineStyle: {
								color: '#fff',
								fontSize: '0.2rem',
							},
						},
					},
				],

				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985',
						},
					},
				},
				legend: {
					left: '20%',
					data: [],
					textStyle: {
						color: '#fff',
						fontSize: '0.1rem',
					},
				},

				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				series: [
					{
						name: '',
						type: 'line',
						stack: 'Total',
						smooth: true,

						showSymbol: false,
						label: {
							show: true,
							position: 'top',
						},

						emphasis: {
							focus: 'series',
						},
						data: [],
					},
				],
			},
			option4: {
				title: {
					text: '库存统计(立方米)',
					top: 0,
					left: 0,
					textStyle: {
						color: '#fff',
						fontSize: '0.2rem',
					},
				},
				// axisLine: {
				// 	lineStyle: {
				// 		color: '#fff',
				// 		fontSize: '1rem',
				// 	},
				// },

				color: ['#01ECF7', '#E8BE1A', '#F42A7D', '#018BE7', '#0153BA'],
				tooltip: {
					trigger: 'item',
				},
				legend: {
					right: 'right',
					bottom: '0',
					textStyle: {
						color: '#fff',
						fontSize: '0.2rem',
					},
				},
				series: [
					{
						left: '-50%',
						bottom: '-10%',
						name: 'Access From',
						type: 'pie',
						radius: ['40%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center',
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '0.1rem',
								fontWeight: 'bold',
							},
						},
						labelLine: {
							show: false,
						},
						data: [],
					},
				],
			},
			// option4: {
			// 	title: {
			// 		text: '各品类销售量',
			// 		textStyle: {
			// 			color: '#fff',
			// 			fontSize: '0.2rem',
			// 		},
			// 	},
			// 	color: ['#01ECF7', '#E8BE1A', '#F42A7D', '#018BE7', '#0153BA'],

			// 	series: [
			// 		{
			// 			name: 'Access From',
			// 			type: 'pie',
			// 			radius: ['10%', '80%'],
			// 			avoidLabelOverlap: false,
			// 			itemStyle: {
			// 				borderRadius: 8,
			// 			},

			// 			roseType: 'area',
			// 			labelLine: {
			// 				show: false,
			// 			},
			// 			data: [
			// 				{ value: 1048, name: 'Search Engine' },
			// 				{ value: 735, name: 'Direct' },
			// 				{ value: 580, name: 'Email' },
			// 				{ value: 484, name: 'Union Ads' },
			// 				{ value: 300, name: 'Video Ads' },
			// 			],
			// 		},
			// 	],
			// },
			option5: {
				title: {
					text: '购货方数量top5(千)',
					textStyle: {
						color: '#fff',
						fontSize: '0.2rem',
					},
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				xAxis: {
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
					axisLine: {
						lineStyle: {
							color: '#fff',
							fontSize: '0.2rem',
						},
					},
					axisLabel: {
						margin: 8,
						formatter: function (params) {
							var val = '';
							if (params.length > 4) {
								val = params.substr(0, 3) + '...';
								return val;
							} else {
								return params;
							}
						},
					},
				},
				yAxis: {
					type: 'value',
					axisLine: {
						lineStyle: {
							color: '#fff',
							fontSize: '0.2rem',
						},
					},
				},
				series: [
					{
						data: [],
						type: 'bar',
						showBackground: true,

						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{ offset: 0, color: '#83bff6' },
									{ offset: 0.5, color: '#188df0' },
									{ offset: 1, color: '#188df0' },
								]
							),
							borderRadius: 0,
						},
						barWidth: '20%',
						emphasis: {
							itemStyle: {
								color: new this.$echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{ offset: 0, color: '#2378f7' },
										{ offset: 0.7, color: '#2378f7' },
										{ offset: 1, color: '#83bff6' },
									]
								),
							},
						},
					},
				],
			},
			option6: {
				title: {
					text: '购货方金额top5(万元)',
					textStyle: {
						color: '#fff',
						fontSize: '0.2rem',
					},
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				xAxis: {
					type: 'category',
					data: [],
					axisLabel: {
						margin: 8,
						formatter: function (params) {
							var val = '';
							if (params.length > 4) {
								val = params.substr(0, 3) + '...';
								return val;
							} else {
								return params;
							}
						},
					},
					axisLine: {
						lineStyle: {
							color: '#fff',
							fontSize: '0.1rem',
						},
					},
				},
				yAxis: {
					type: 'value',
					axisLine: {
						lineStyle: {
							color: '#fff',
							fontSize: '0.2rem',
						},
					},
				},

				series: [
					{
						data: [],
						type: 'bar',
						showBackground: true,
						itemStyle: {
							color: new this.$echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{ offset: 0, color: '#FF2B80' },
									{ offset: 0.7, color: '#8B20B2' },
									{ offset: 1, color: '#831FAA' },
								]
							),
							borderRadius: 0,
						},
						barWidth: '20%',
						emphasis: {
							itemStyle: {
								color: new this.$echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{ offset: 0, color: '#FF2B80' },
										{ offset: 0.7, color: '#8B20B2' },
										{ offset: 1, color: '#831FAA' },
									]
								),
							},
						},
					},
				],
			},
			data1: null,
			data2: null,
			data3: null,
			data4: null,
			data5: null,
			data6: null,
			data7: null,
			data8: null, //销售外标
			data9: null, //库存外标
			main7Total: 0,
			main3Total: 0,
			beginDate: new Date().getFullYear() + '-01-01',
			endDate: new Date().getFullYear() + '-12-31',
			// beginDate: '2021-01-01',
			// endDate: '2021-12-31',
			purchaseContractData: {
				合同数量: {
					体积: 0,
					重量: 0,
				},
				合同金额: {
					人民币: 0,
					欧元: 0,
					美元: 0,
				},
			},
			saleContractData: null,
      map: {
        currentName: '',
        history: []
      }
		};
	},
	computed: {
		progressData() {
			var progressData = [
				{
					data: 0,
					color: '#F6B90B',
					percentage: 100,
					title: new Date().getFullYear()+'年累计销售外标',
				},
				{
					data: 0,
					color: '#E5E5E5',
					percentage: 100,
					title: '库存外标',
				},
			];
			var max = Math.max(this.data2, this.data3, this.data8, this.data9);
			// var max = 1000000

			progressData[0].data = (this.data8 / 10000).toFixed(2) + '万立方米';
			progressData[0].percentage = Number(
				((this.data8 / max) * 100).toFixed(0)
			);
			progressData[1].data = (this.data9 / 10000).toFixed(2) + '万立方米';
			progressData[1].percentage = Number(
				((this.data9 / max) * 100).toFixed(0)
			);
			return progressData;
		},
		progressData2() {
			var progressData = [
				{
					data: 0,
					color: '#F82B7E',
					title: '合同个数',
				},
				{
					data: '0.00万',
					color: '#F6B90B',
					title: '合同体积',
				},
				{
					data: '0.00万',
					color: '#E5E5E5',
					title: '合同重量',
				},
				{
					data: '0.00万',
					color: '#F75507',
					title: '合同金额(人民币)',
				},
				{
					data: '0.00万',
					color: '#F75507',
					title: '合同金额(欧元)',
				},
				{
					data: '0.00万',
					color: '#F75507',
					title: '合同金额(美元)',
				},
				{
					data: 0,
					color: '#F82B7E',
					title: '海关关税',
				},
				{
					data: 0,
					color: '#F75507',
					title: '海关进口量',
				},
			];
			var purchaseContractData = this.purchaseContractData;
			progressData[0].data = purchaseContractData['合同个数'];

			progressData[1].data =
				(purchaseContractData['合同数量']['体积'] / 10000).toFixed(2) +
				'万';
			progressData[2].data =
				(purchaseContractData['合同数量']['重量'] / 10000).toFixed(2) +
				'万';
			if (purchaseContractData['合同金额']['人民币'])
				progressData[3].data =
					(
						purchaseContractData['合同金额']['人民币'] / 10000
					).toFixed(2) + '万';
			if (purchaseContractData['合同金额']['欧元'])
				progressData[4].data =
					(purchaseContractData['合同金额']['欧元'] / 10000).toFixed(
						2
					) + '万';
			if (purchaseContractData['合同金额']['美元'])
				progressData[5].data =
					(purchaseContractData['合同金额']['美元'] / 10000).toFixed(
						2
					) + '万';
			progressData[6].data = (this.data2 / 10000).toFixed(2) + '万元';

			progressData[7].data = (this.data3 / 10000).toFixed(2) + '万';

			return progressData;
		},
	},
	activated() {},
	created() {},
	mounted() {
		this.init();
		// this.getWorld();
		// console.log('echarts版本', this.$echarts.version);
		this.scrollAuto();
	},
	methods: {
		scrollAuto() {
			var scrollWrap = this.$refs.scrollWrap;
			this.$nextTick(() => {
				setInterval(() => {
					if (
						scrollWrap.scrollTop + scrollWrap.clientHeight ==
						scrollWrap.scrollHeight
					) {
						scrollWrap.scrollTop = 0;
					} else {
						scrollWrap.scrollTop += 1;
					}
				}, 60);
			});
		},
		creatChart1(idName, dataName) {
			var myChart = this.$echarts.init(document.getElementById(idName));
			myChart.setOption(this[dataName], true);
			// console.log(myChart, this[dataName]);
		},
		init() {
			// this.customerDebt_home();
			this.customsDuty_home();
			this.customsImportQuantity_home();
			// this.importGoodsProportion_home();
			this.inventory_home();
			// this.saleGoodsReport_home();
			this.saleTop5_home();
			this.saleForeignQuantity_home();
			this.mapData_home();
			this.purchaseContractData_home();
			this.saleContractData_home();
			this.advancePaymentDetail_home();
			this.financeMonthlySale_home();
		},
    /**
     * 地图数据转换
     * @param data 数据
     * @param cityList 城市列表
     */
    mapDataConvert(data, cityList){
      let mapData = [];
      let years = Object.keys(data)
      for (let i = 0; i < years.length; i++) {
        mapData.push([]);
      }
      for (let key in cityList) {
        for (let i = 0; i < years.length; i++) {
          mapData[i].push({
            year: years[i],
            name: key,
            value: data[years[i]][key] / 10000,
          });
        }
      }
      return mapData;
    },
    data2EChartMapData(data, cityList){
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let location = cityList[data[i].name];
        if (location) {
          res.push({
            name: data[i].name,
            value: location.concat(data[i].value),
          });
        }
      }
      return res;
    },
		//创建地图
		drawChart(data) {
			// 颜色方案
      const colors = [
        [
          '#1DE9B6',
          '#F46E36',
          '#04B9FF',
          '#5DBD32',
          '#FFC809',
          '#90EE90',
          '#BDA29A',
          '#6E7074',
          '#546570',
          '#C4CCD3',
        ],
        [
          '#37A2DA',
          '#67E0E3',
          '#32C5E9',
          '#9FE6B8',
          '#FFDB5C',
          '#FF9F7F',
          '#FB7293',
          '#E062AE',
          '#E690D1',
          '#E7BCF3',
          '#9D96F5',
          '#8378EA',
          '#8378EA',
        ],
        [
          '#DD6B66',
          '#759AA0',
          '#E69D87',
          '#8DC1A9',
          '#EA7E53',
          '#EEDD78',
          '#73A373',
          '#73B9BC',
          '#7289AB',
          '#91CA8C',
          '#F49F42',
        ],
        ['#9FE6B8'],
      ];
      const colorIndex = 3; //使用的颜色方案下标

			// 基于准备好的dom，初始化echarts实例
			let chartMap = this.$echarts.init(
				document.getElementById('chartMap')
			);

      console.log(data);
      // 获取年份列表
      let yearList = Object.keys(data);

      //cityLocation把所有可能出现的城市加到数组里面
			let cityLocation = {
				台湾: [121.5135, 25.0308],
				黑龙江: [127.9688, 45.368],
				内蒙古: [110.3467, 41.4899],
				吉林: [125.8154, 44.2584],
				北京: [116.4551, 40.2539],
				辽宁: [123.1238, 42.1216],
				河北: [114.4995, 38.1006],
				天津: [117.4219, 39.4189],
				山西: [112.3352, 37.9413],
				陕西: [109.1162, 34.2004],
				甘肃: [103.5901, 36.3043],
				宁夏: [106.3586, 38.1775],
				青海: [101.4038, 36.8207],
				新疆: [87.9236, 43.5883],
				西藏: [91.11, 29.97],
				四川: [103.9526, 30.7617],
				重庆: [108.384366, 30.439702],
				山东: [117.1582, 36.8701],
				河南: [113.4668, 34.6234],
				江苏: [118.8062, 31.9208],
				安徽: [117.29, 32.0581],
				湖北: [114.3896, 30.6628],
				浙江: [119.5313, 29.8773],
				福建: [119.4543, 25.9222],
				江西: [116.0046, 28.6633],
				湖南: [113.0823, 28.2568],
				贵州: [106.6992, 26.7682],
				云南: [102.9199, 25.4663],
				广东: [113.12244, 23.009505],
				广西: [108.479, 23.1152],
				海南: [110.3893, 19.8516],
				上海: [121.4648, 31.2891],
			};

			/*柱子Y名称*/
			let categoryData = [];
			let barData = [];

			let mapData = this.mapDataConvert(data, cityLocation);

			/**
       * 将数据放入条形柱中
       **/
			for (let i = 0; i < mapData.length; i++) {
				mapData[i].sort(function sortNumber(a, b) {
					return a.value - b.value;
				});
				barData.push([]);
				categoryData.push([]);
				for (let j = 0; j < mapData[i].length; j++) {
					if (mapData[i][j].value > 0) {
						barData[i].push(mapData[i][j].value);
						categoryData[i].push(mapData[i][j].name);
					}
				}
			}

			this.$echarts.registerMap('china', city_map_full);
			/**
       * 将数据转换为EChart地图数据
       **/
			let convertData = this.data2EChartMapData(data, cityLocation)

			let option = {
				timeline: {
					data: yearList,
					axisType: 'category',
					autoPlay: true,
					playInterval: 3000,
					left: '10%',
					right: '10%',
					bottom: '3%',
					width: '80%',
					label: {
						normal: {
							textStyle: {
								color: '#ddd',
							},
						},
						emphasis: {
							textStyle: {
								color: '#fff',
							},
						},
					},
					symbolSize: 10,
					lineStyle: {
						color: '#555',
					},
					checkpointStyle: {
						borderColor: '#777',
						borderWidth: 2,
					},
					controlStyle: {
						showNextBtn: true,
						showPrevBtn: true,
						normal: {
							color: '#666',
							borderColor: '#666',
						},
						emphasis: {
							color: '#aaa',
							borderColor: '#aaa',
						},
					},
				},
				baseOption: {
					animation: true,
					animationDuration: 1000,
					animationEasing: 'cubicInOut',
					animationDurationUpdate: 1000,
					animationEasingUpdate: 'cubicInOut',
					grid: {
						right: '1%',
						top: '15%',
						bottom: '10%',
						width: '20%',
					},
					tooltip: {
						trigger: 'axis', // hover触发器
						axisPointer: {
							// 坐标轴指示器，坐标轴触发有效
							type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
							shadowStyle: {
								color: 'rgba(150,150,150,0.1)', //hover颜色
							},
						},
					},
					geo: {
						show: true,
						map: 'china',
						roam: true,
						zoom: 1,
						center: [113.83531246, 34.0267395887],
						label: {
							emphasis: {
								show: false,
							},
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(147, 235, 248, 1)',
								borderWidth: 1,
								areaColor: {
									type: 'radial',
									x: 0.5,
									y: 0.5,
									r: 0.8,
									colorStops: [
										{
											offset: 0,
											color: 'rgba(147, 235, 248, 0)', // 0% 处的颜色
										},
										{
											offset: 1,
											color: 'rgba(147, 235, 248, .2)', // 100% 处的颜色
										},
									],
									globalCoord: false, // 缺省为 false
								},
								shadowColor: 'rgba(128, 217, 248, 1)',
								// shadowColor: 'rgba(255, 255, 255, 1)',
								shadowOffsetX: -2,
								shadowOffsetY: 2,
								shadowBlur: 10,
							},
							emphasis: {
								areaColor: '#389BB7',
								borderWidth: 0,
							},
						},
					},
				},
				options: [],
			};

			for (let n = 0; n < yearList.length; n++) {
				option.options.push({
					backgroundColor: '#040f33',
					title: [
						{
							text: '全国各地区销售情况',
							subtext: '',
							left: 'center',
							top: '5%',
							textStyle: {
								color: '#fff',
								fontSize: 18,
							},
						},
						{
							id: 'statistic',
							text: yearList[n] + '数据统计情况',
							left: '75%',
							top: '7%',
							textStyle: {
								color: '#fff',
								fontSize: 15,
							},
						},
					],
					xAxis: {
						type: 'value',
						scale: true,
						position: 'top',
						min: 0,
						boundaryGap: false,
						splitLine: {
							show: false,
						},
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							margin: 2,
							textStyle: {
								color: '#aaa',
							},
						},
					},
					yAxis: {
						type: 'category',
						//  name: 'TOP 20',
						nameGap: 16,
						axisLine: {
							show: true,
							lineStyle: {
								color: '#ddd',
							},
						},
						axisTick: {
							show: false,
							lineStyle: {
								color: '#ddd',
							},
						},
						axisLabel: {
							interval: 0,
							textStyle: {
								color: '#ddd',
							},
						},
						data: categoryData[n],
					},

					series: [
						//地图
						{
							type: 'map',
							map: 'china',
							geoIndex: 0,
							aspectScale: 0.75, //长宽比
							showLegendSymbol: false, // 存在legend时显示
							label: {
								normal: {
									show: false,
								},
								emphasis: {
									show: false,
									textStyle: {
										color: '#fff',
									},
								},
							},
							roam: true,
							itemStyle: {
								normal: {
									areaColor: '#031525',
									borderColor: '#FFFFFF',
								},
								emphasis: {
									areaColor: '#2B91B7',
								},
							},
							animation: false,
							data: mapData,
						},
						//地图中闪烁的点
						{
							//  name: 'Top 5',
							type: 'effectScatter',
							coordinateSystem: 'geo',
							data: this.data2EChartMapData(
								mapData[n]
									.sort(function (a, b) {
										return b.value - a.value;
									})
									.slice(0, 40), cityLocation
							),
							symbolSize: function (val) {
								return Math.log2(val[2]) * 2;
							},
							showEffectOn: 'render',
							rippleEffect: {
								brushType: 'stroke',
							},
							hoverAnimation: true,
							label: {
								normal: {
									formatter: '{b}',
									position: 'right',
									show: true,
								},
							},
							itemStyle: {
								normal: {
									color: colors[colorIndex][0], //n
									shadowBlur: 10,
									shadowColor: colors[colorIndex][0],
								},
							},
							zlevel: 1,
						},
						//柱状图
						{
							zlevel: 1.5,
							type: 'bar',
							barMaxWidth: 8,
							symbol: 'none',
							itemStyle: {
								normal: {
									color: colors[colorIndex][0],
									formatter: function (params) {
										if (params.value > 0) {
											return params.value;
										} else {
											return '';
										}
									},
								},
							},
							data: barData[n],
						},
					],
				});
			}
      /**
       * 地图下钻
       */
			chartMap.on("click", (params) => {
			  console.log(params)
      })

			chartMap.setOption(option);
		},

    getMapJson(name){

    },
		//创建迁徙地图
		// drawChart(mapData) {
		//   console.log(111, mapData);
		//   var geoCoordMap = {
		//     MATADI: [5.8945, 4.51682],
		//     JINGJIANG: [116.35888, 25.82773],
		//     "HAIPHONG VIETNAM": [22.8945, 12.51682],
		//     "HAI PHONG PORT,VIETNAMS": [5.8945, 4.51682],
		//     "ANY EUROPEAN PORT": [116.35888, 25.82773],
		//     "SHANGHAI,CHINA": [22.8945, 12.51682],
		//     "ANY PORT IN AFRICA": [22.8945, 12.51682]
		//   };
		//   //连线数组
		//   var BJData = [
		//     // [
		//     // 	[
		//     // 		{
		//     // 			name: 'MATADI',
		//     // 		},
		//     // 		{
		//     // 			name: 'MATADI',
		//     // 			value: 60,
		//     // 			num: 220,
		//     // 		},
		//     // 	],
		//     // 	[
		//     // 		{
		//     // 			name: 'MATADI',
		//     // 		},
		//     // 		{
		//     // 			name: 'JINGJIANG',
		//     // 			value: 60,
		//     // 			num: 300,
		//     // 		},
		//     // 	],
		//     // ]
		//   ];
		//   mapData.map((item, index) => {
		//     if (index != 0) return;
		//     BJData.push([
		//       [
		//         {
		//           name: item.loadingPort
		//         },
		//         {
		//           name: item.loadingPort,
		//           value: 60,
		//           num: 220
		//         }
		//       ],

		//       [
		//         {
		//           name: item.loadingPort
		//         },
		//         {
		//           name: item.deliveryPort,
		//           value: 60,
		//           num: 300
		//         }
		//       ]
		//     ]);
		//   });
		//   console.log("BJData", BJData);
		//   var planePath =
		//     "path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705";
		//   //组装 lines 经纬度连线数组
		//   var convertData = function(data) {
		//     console.log(444, data);
		//     var res = [];
		//     for (var i = 0; i < data.length; i++) {
		//       var dataItem = data[i];
		//       var fromCoord = geoCoordMap[dataItem[0].name];
		//       var toCoord = geoCoordMap[dataItem[1].name];
		//       if (fromCoord && toCoord) {
		//         res.push([
		//           {
		//             coord: fromCoord
		//           },
		//           {
		//             coord: toCoord
		//           }
		//         ]);
		//       }
		//     }
		//     return res;
		//   };

		//   var color = ["#FF8888", " #ffa022", "#a6c84c", "#3ed4ff", "	#E38EFF"];
		//   var series = [];
		//   BJData.map(BJDataItem => {
		//     [["灵宝", BJDataItem]].forEach(function(item, i) {
		//       console.log(333, item, i);
		//       series.push(
		//         {
		//           type: "lines",
		//           zlevel: 1,
		//           effect: {
		//             show: true,
		//             period: 6,
		//             trailLength: 0.7,
		//             color: "#fff",
		//             symbolSize: 3
		//           },
		//           lineStyle: {
		//             normal: {
		//               color: color[i],
		//               width: 0,
		//               curveness: 0.2
		//             }
		//           },

		//           data: convertData(item[1])
		//         },
		//         {
		//           type: "lines",
		//           zlevel: 2,
		//           effect: {
		//             show: true,
		//             period: 6,
		//             trailLength: 0,
		//             symbol: planePath,
		//             symbolSize: 15
		//           },
		//           lineStyle: {
		//             normal: {
		//               color: color[i],
		//               width: 1,
		//               opacity: 0.4,
		//               curveness: 0.2
		//             }
		//           },

		//           data: convertData(item[1])
		//         },
		//         {
		//           type: "lines",
		//           zlevel: 2,
		//           effect: {
		//             show: true,
		//             period: 6,
		//             trailLength: 0,
		//             symbol: planePath,
		//             symbolSize: 15
		//           },
		//           lineStyle: {
		//             normal: {
		//               color: color[i],
		//               width: 1,
		//               opacity: 0.4,
		//               curveness: 0.2
		//             }
		//           },

		//           data: convertData(item[1])
		//         },
		//         {
		//           type: "lines",
		//           zlevel: 2,
		//           effect: {
		//             show: true,
		//             period: 6,
		//             trailLength: 0,
		//             symbol: planePath,
		//             symbolSize: 15
		//           },
		//           lineStyle: {
		//             normal: {
		//               color: color[i],
		//               width: 1,
		//               opacity: 0.4,
		//               curveness: 0.2
		//             }
		//           },

		//           data: convertData(item[1])
		//         },
		//         {
		//           type: "effectScatter",
		//           coordinateSystem: "geo",
		//           zlevel: 2,
		//           rippleEffect: {
		//             brushType: "stroke"
		//           },
		//           label: {
		//             normal: {
		//               show: true,
		//               position: "right",
		//               formatter: "{b}"
		//             }
		//           },
		//           symbolSize: function(val) {
		//             return val[2] / 8;
		//           },
		//           itemStyle: {
		//             normal: {
		//               color: color[i]
		//             }
		//           },
		//           data: item[1].map(function(dataItem) {
		//             return {
		//               name: dataItem[1].name,
		//               value: geoCoordMap[dataItem[1].name].concat([
		//                 dataItem[1].value
		//               ]),
		//               tooltip: {
		//                 trigger: "item",
		//                 formatter: `区域：{b}<br/>发货数量：${dataItem[1].num}`
		//               }
		//             };
		//           })
		//         }
		//       );
		//     });
		//   });

		//   var option = {
		//     // backgroundColor: '#080a20',
		//     title: {
		//       text: "贸易态势地图", // 主标题文本，支持使用 \n 换行
		//       top: 0, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
		//       left: "left", // 值: 'left', 'center', 'right' 同上
		//       textStyle: {
		//         // 文本样式
		//         fontSize: 24,
		//         fontWeight: 600,
		//         color: "#fff"
		//       }
		//     },
		//     tooltip: {
		//       trigger: "item"
		//     },
		//     legend: {
		//       orient: "vertical",
		//       top: "bottom",
		//       left: "right",
		//       data: [],
		//       textStyle: {
		//         color: "#fff"
		//       },
		//       selectedMode: "single"
		//     },
		//     geo: {
		//       map: "world",
		//       zoom: 1.2,
		//       scaleLimit: {
		//         //控制滚轮缩放大小
		//         max: 8,
		//         min: 1
		//       },
		//       label: {
		//         emphasis: {
		//           show: false
		//         }
		//       },
		//       roam: true,
		//       itemStyle: {
		//         normal: {
		//           areaColor: "#132937",
		//           borderColor: "#0692a4"
		//         },
		//         emphasis: {
		//           areaColor: "#0b1c2d"
		//         }
		//       }
		//     },
		//     series: series
		//   };
		//   // 基于准备好的dom，初始化echarts实例
		//   let chartMap = this.$echarts.init(document.getElementById("chartMap"));
		//   // 监听屏幕变化自动缩放图表
		//   window.addEventListener("resize", function() {
		//     chartMap.resize();
		//   });
		//   console.log("地图数据", option);
		//   chartMap.setOption(option);
		// },
		// getWorld() {
		// 	var that = this;
		// 	console.log(world);
		// 	let namemap = world.namemap;
		// 	let dataArr = world.dataArr;

		// 	that.drawChart(namemap, dataArr);
		// },
		// drawChart(name, data) {
		// 	console.log(333, name, data);
		// 	var mapName = 'world';
		// 	var color = [
		// 		'#1B1B1B',
		// 		'#ff971b',
		// 		'#acff43',
		// 		'#ff73b7',
		// 		'#ffff46',
		// 		'#27bbfe',
		// 	];
		// 	// 基于准备好的dom，初始化echarts实例
		// 	let chartMap = this.$echarts.init(
		// 		document.getElementById('chartMap')
		// 	);
		// 	// 监听屏幕变化自动缩放图表
		// 	window.addEventListener('resize', function () {
		// 		chartMap.resize();
		// 	});

		// 	//世界地图
		// 	var map2 = {
		// 		// 图表主标题
		// 		title: {
		// 			text: '贸易态势地图', // 主标题文本，支持使用 \n 换行
		// 			top: 0, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
		// 			left: 'left', // 值: 'left', 'center', 'right' 同上
		// 			textStyle: {
		// 				// 文本样式
		// 				fontSize: 24,
		// 				fontWeight: 600,
		// 				color: '#fff',
		// 			},
		// 		},

		// 		// 提示框组件
		// 		tooltip: {
		// 			trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
		// 			// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
		// 			// 使用函数模板  传入的数据值 -> value: number | Array
		// 			formatter: function (val) {
		// 				return val.data.name + ': ' + val.data.value;
		// 			},
		// 		},
		// 		// 视觉映射组件
		// 		// visualMap: {
		// 		// 	type: 'continuous', // continuous 类型为连续型  piecewise 类型为分段型
		// 		// 	show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
		// 		// 	// 指定 visualMapContinuous 组件的允许的最小/大值。'min'/'max' 必须用户指定。
		// 		// 	// [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』
		// 		// 	min: 0,
		// 		// 	max: 1000000,
		// 		// 	// 文本样式
		// 		// 	textStyle: {
		// 		// 		fontSize: 14,
		// 		// 		color: '#fff',
		// 		// 	},
		// 		// 	realtime: false, // 拖拽时，是否实时更新
		// 		// 	calculable: true, // 是否显示拖拽用的手柄
		// 		// 	// 定义 在选中范围中 的视觉元素
		// 		// 	inRange: {
		// 		// 		color: [
		// 		// 			'#1B1B1B',
		// 		// 			// '#9fb5ea',
		// 		// 			// '#e6ac53',
		// 		// 			// '#74e2ca',
		// 		// 			// '#85daef',
		// 		// 			// '#9feaa5',
		// 		// 			// '#5475f5',
		// 		// 		], // 图元的颜色
		// 		// 	},
		// 		// },
		// 		visualMap: {
		// 			min: 0,
		// 			max: 100,
		// 			calculable: true,
		// 			color: color,
		// 			show: false,
		// 		},
		// 		geo: {
		// 			show: true,
		// 			map: mapName,
		// 			label: {
		// 				normal: {
		// 					show: false,
		// 				},
		// 				emphasis: {
		// 					show: false,
		// 				},
		// 			},
		// 			roam: true,
		// 			itemStyle: {
		// 				normal: {
		// 					areaColor: '#031525',
		// 					borderColor: '#097bba',
		// 				},
		// 				emphasis: {
		// 					areaColor: '#2B91B7',
		// 				},
		// 			},
		// 		},
		// 		// geo: {
		// 		// 	// geo组件
		// 		// 	map: mapName,
		// 		// 	label: {
		// 		// 		normal: {
		// 		// 			show: true,
		// 		// 			formatter: '{a}',
		// 		// 			// position: 'inside',
		// 		// 			backgroundColor: '#fff',
		// 		// 			padding: [3, 5],
		// 		// 			borderRadius: 3,
		// 		// 			borderWidth: 1,
		// 		// 			borderColor: 'rgba(0,0,0,0.5)',
		// 		// 			color: '#777',
		// 		// 		},
		// 		// 		emphasis: {
		// 		// 			areaColor: '#2a333d',
		// 		// 		},
		// 		// 	},
		// 		// 	selectedMode: 'single',
		// 		// 	roam: true,
		// 		// 	itemStyle: {
		// 		// 		normal: {
		// 		// 			areaColor: '#323c48',
		// 		// 			borderColor: '#404a59',
		// 		// 		},
		// 		// 		emphasis: {
		// 		// 			areaColor: '#2a333d',
		// 		// 		},
		// 		// 	},
		// 		// },
		// 		series: [
		// 			{
		// 				type: 'map', // 类型
		// 				// 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
		// 				name: '世界地图',
		// 				mapType: 'world', // 地图类型
		// 				// 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
		// 				roam: true,
		// 				// 图形上的文本标签
		// 				label: {
		// 					show: false, // 是否显示对应地名
		// 				},
		// 				// 地图区域的多边形 图形样式
		// 				itemStyle: {
		// 					areaColor: '#1B1B1B', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
		// 					borderWidth: 1, // 描边线宽 为 0 时无描边
		// 					borderColor: '#4b6398', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
		// 					borderType: 'solid', // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
		// 				},
		// 				// 高亮状态下的多边形和标签样式
		// 				emphasis: {
		// 					label: {
		// 						show: true, // 是否显示标签
		// 						color: '#fff', // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
		// 					},
		// 					itemStyle: {
		// 						areaColor: '#4b6398', // 地图区域的颜色
		// 					},
		// 				},
		// 				// 自定义地区的名称映射
		// 				nameMap: name,
		// 				// 地图系列中的数据内容数组 数组项可以为单个数值
		// 				data: data,
		// 			},
		// 		],
		// 	};
		// 	var geoCoordMap = {
		// 		上海: [121.4648, 31.2891],
		// 		东莞: [113.8953, 22.901],
		// 		东营: [118.7073, 37.5513],
		// 		中山: [113.4229, 22.478],
		// 		临汾: [111.4783, 36.1615],
		// 		临沂: [118.3118, 35.2936],
		// 		丹东: [124.541, 40.4242],
		// 		丽水: [119.5642, 28.1854],
		// 		乌鲁木齐: [87.9236, 43.5883],
		// 		佛山: [112.8955, 23.1097],
		// 		保定: [115.0488, 39.0948],
		// 		兰州: [103.5901, 36.3043],
		// 		包头: [110.3467, 41.4899],
		// 		北京: [116.4551, 40.2539],
		// 		北海: [109.314, 21.6211],
		// 		南京: [118.8062, 31.9208],
		// 		南宁: [108.479, 23.1152],
		// 		南昌: [116.0046, 28.6633],
		// 		南通: [121.1023, 32.1625],
		// 		厦门: [118.1689, 24.6478],
		// 		台州: [121.1353, 28.6688],
		// 		合肥: [117.29, 32.0581],
		// 		呼和浩特: [111.4124, 40.4901],
		// 		咸阳: [108.4131, 34.8706],
		// 		哈尔滨: [127.9688, 45.368],
		// 		唐山: [118.4766, 39.6826],
		// 		嘉兴: [120.9155, 30.6354],
		// 		大同: [113.7854, 39.8035],
		// 		大连: [122.2229, 39.4409],
		// 		天津: [117.4219, 39.4189],
		// 		太原: [112.3352, 37.9413],
		// 		威海: [121.9482, 37.1393],
		// 		宁波: [121.5967, 29.6466],
		// 		宝鸡: [107.1826, 34.3433],
		// 		宿迁: [118.5535, 33.7775],
		// 		常州: [119.4543, 31.5582],
		// 		广州: [113.5107, 23.2196],
		// 		廊坊: [116.521, 39.0509],
		// 		延安: [109.1052, 36.4252],
		// 		张家口: [115.1477, 40.8527],
		// 		徐州: [117.5208, 34.3268],
		// 		德州: [116.6858, 37.2107],
		// 		惠州: [114.6204, 23.1647],
		// 		成都: [103.9526, 30.7617],
		// 		扬州: [119.4653, 32.8162],
		// 		承德: [117.5757, 41.4075],
		// 		拉萨: [91.1865, 30.1465],
		// 		无锡: [120.3442, 31.5527],
		// 		日照: [119.2786, 35.5023],
		// 		昆明: [102.9199, 25.4663],
		// 		杭州: [119.5313, 29.8773],
		// 		枣庄: [117.323, 34.8926],
		// 		柳州: [109.3799, 24.9774],
		// 		株洲: [113.5327, 27.0319],
		// 		武汉: [114.3896, 30.6628],
		// 		汕头: [117.1692, 23.3405],
		// 		江门: [112.6318, 22.1484],
		// 		沈阳: [123.1238, 42.1216],
		// 		沧州: [116.8286, 38.2104],
		// 		河源: [114.917, 23.9722],
		// 		泉州: [118.3228, 25.1147],
		// 		泰安: [117.0264, 36.0516],
		// 		泰州: [120.0586, 32.5525],
		// 		济南: [117.1582, 36.8701],
		// 		济宁: [116.8286, 35.3375],
		// 		海口: [110.3893, 19.8516],
		// 		淄博: [118.0371, 36.6064],
		// 		淮安: [118.927, 33.4039],
		// 		深圳: [114.5435, 22.5439],
		// 		清远: [112.9175, 24.3292],
		// 		温州: [120.498, 27.8119],
		// 		渭南: [109.7864, 35.0299],
		// 		湖州: [119.8608, 30.7782],
		// 		湘潭: [112.5439, 27.7075],
		// 		滨州: [117.8174, 37.4963],
		// 		潍坊: [119.0918, 36.524],
		// 		烟台: [120.7397, 37.5128],
		// 		玉溪: [101.9312, 23.8898],
		// 		珠海: [113.7305, 22.1155],
		// 		盐城: [120.2234, 33.5577],
		// 		盘锦: [121.9482, 41.0449],
		// 		石家庄: [114.4995, 38.1006],
		// 		福州: [119.4543, 25.9222],
		// 		秦皇岛: [119.2126, 40.0232],
		// 		绍兴: [120.564, 29.7565],
		// 		聊城: [115.9167, 36.4032],
		// 		肇庆: [112.1265, 23.5822],
		// 		舟山: [122.2559, 30.2234],
		// 		苏州: [120.6519, 31.3989],
		// 		莱芜: [117.6526, 36.2714],
		// 		菏泽: [115.6201, 35.2057],
		// 		营口: [122.4316, 40.4297],
		// 		葫芦岛: [120.1575, 40.578],
		// 		衡水: [115.8838, 37.7161],
		// 		衢州: [118.6853, 28.8666],
		// 		西宁: [101.4038, 36.8207],
		// 		西安: [109.1162, 34.2004],
		// 		贵阳: [106.6992, 26.7682],
		// 		连云港: [119.1248, 34.552],
		// 		邢台: [114.8071, 37.2821],
		// 		邯郸: [114.4775, 36.535],
		// 		郑州: [113.4668, 34.6234],
		// 		鄂尔多斯: [108.9734, 39.2487],
		// 		重庆: [107.7539, 30.1904],
		// 		金华: [120.0037, 29.1028],
		// 		铜川: [109.0393, 35.1947],
		// 		银川: [106.3586, 38.1775],
		// 		镇江: [119.4763, 31.9702],
		// 		长春: [125.8154, 44.2584],
		// 		长沙: [113.0823, 28.2568],
		// 		长治: [112.8625, 36.4746],
		// 		阳泉: [113.4778, 38.0951],
		// 		青岛: [120.4651, 36.3373],
		// 		韶关: [113.7964, 24.7028],
		// 	};
		// 	var dataT = [
		// 		{
		// 			name: '上海',
		// 			value: 95,
		// 		},
		// 		{
		// 			name: '广州',
		// 			value: 90,
		// 		},
		// 		{
		// 			name: '大连',
		// 			value: 80,
		// 		},
		// 		{
		// 			name: '南宁',
		// 			value: 70,
		// 		},
		// 		{
		// 			name: '南昌',
		// 			value: 60,
		// 		},
		// 		{
		// 			name: '拉萨',
		// 			value: 50,
		// 		},
		// 		{
		// 			name: '长春',
		// 			value: 40,
		// 		},
		// 		{
		// 			name: '包头',
		// 			value: 30,
		// 		},
		// 		{
		// 			name: '重庆',
		// 			value: 20,
		// 		},
		// 		{
		// 			name: '常州',
		// 			value: 10,
		// 		},
		// 	];

		// 	geoCoordMap['淮北供电公司'] =[116.8549110000, 33.9014640000];

		// 	var GZData = [];
		// 	var tempData = ['淮北供电公司', GZData];

		// 	dataT.map((item, index) => {
		// 		var arr = [];
		// 		arr.push(item);
		// 		arr.push({
		// 			name: '淮北供电公司',
		// 		});
		// 		GZData.push(arr);
		// 	});

		// 	var convertData = function (data) {
		// 		var res = [];
		// 		for (var i = 0; i < data.length; i++) {
		// 			var dataItem = data[i];
		// 			var fromCoord = geoCoordMap[dataItem[0].name];
		// 			var toCoord = geoCoordMap[dataItem[1].name];
		// 			if (fromCoord && toCoord) {
		// 				res.push({
		// 					fromName: dataItem[0].name,
		// 					toName: dataItem[1].name,
		// 					coords: [fromCoord, toCoord],
		// 					value: dataItem[0].value,
		// 				});
		// 			}
		// 		}
		// 		return res;
		// 	};

		// 	map2.series.push(
		// 		{
		// 			name: tempData[0],
		// 			type: 'lines',
		// 			zlevel: 3,
		// 			symbol: ['none', 'circle'],
		// 			effect: {
		// 				show: true,
		// 				period: 3, //箭头指向速度，值越小速度越快
		// 				trailLength: 0.01, //特效尾迹长度[0,1]值越大，尾迹越长重
		// 				symbolSize: 4, //图标大小
		// 			},
		// 			lineStyle: {
		// 				normal: {
		// 					opacity: 1,
		// 					curveness: 0.4, //曲线的弯曲程度
		// 					color: '#609fd4',
		// 				},
		// 			},
		// 			data: convertData(tempData[1]),
		// 		},
		// 		{
		// 			name: tempData[0],
		// 			type: 'scatter',
		// 			coordinateSystem: 'geo',
		// 			zlevel: 2,
		// 			rippleEffect: {
		// 				brushType: 'stroke',
		// 			},
		// 			label: {
		// 				normal: {
		// 					show: true,
		// 					position: 'right',
		// 					formatter: '{b}',
		// 				},
		// 			},
		// 			symbolSize: function (val) {
		// 				console.log(val);
		// 				return val[2] / 2;
		// 			},
		// 			itemStyle: {
		// 				normal: {
		// 					//                fontSize: 80,
		// 				},
		// 			},
		// 			data: tempData[1].map(function (dataItem) {
		// 				return {
		// 					name: dataItem[0].name,
		// 					value: geoCoordMap[dataItem[0].name].concat([
		// 						dataItem[0].value,
		// 					]),
		// 				};
		// 			}),
		// 		},
		// 		{
		// 			type: 'effectScatter',
		// 			coordinateSystem: 'geo',
		// 			zlevel: 4,
		// 			symbolSize: 30,
		// 			label: {
		// 				normal: {
		// 					show: true,
		// 					position: 'right',
		// 					formatter: '{b}',

		// 					color: 'white',
		// 				},
		// 			},
		// 			itemStyle: {
		// 				normal: {
		// 					color: 'white',
		// 				},
		// 			},
		// 			rippleEffect: {
		// 				scale: 4,
		// 				brushType: 'stroke',
		// 			},
		// 			data: [
		// 				{
		// 					name: tempData[0],
		// 					value: geoCoordMap[tempData[0]],
		// 					visualMap: false,
		// 				},
		// 			],
		// 		},
		// 		{
		// 			type: 'scatter',
		// 			coordinateSystem: 'geo',
		// 			zlevel: 4,
		// 			symbolSize: 20,
		// 			symbol: 'pin',
		// 			itemStyle: {
		// 				normal: {
		// 					color: 'white',
		// 				},
		// 			},
		// 			rippleEffect: {
		// 				//        brushType: 'stroke'
		// 			},
		// 			data: [
		// 				{
		// 					name: tempData[0],
		// 					value: geoCoordMap[tempData[0]],
		// 					visualMap: false,
		// 				},
		// 			],
		// 		}
		// 	);
		// 	// 绘制图表
		// 	console.log('map2', map2);
		// 	chartMap.setOption(map2);
		// 	// 定时显示提示框和高亮效果
		// 	return;
		// 	let index = -1;
		// 	setInterval(function () {
		// 		// 隐藏提示框
		// 		chartMap.dispatchAction({
		// 			type: 'hideTip',
		// 			seriesIndex: 0,
		// 			dataIndex: index,
		// 		});
		// 		// 显示提示框
		// 		chartMap.dispatchAction({
		// 			type: 'showTip',
		// 			seriesIndex: 0,
		// 			dataIndex: index + 1,
		// 		});
		// 		// 取消高亮指定的数据图形
		// 		chartMap.dispatchAction({
		// 			type: 'downplay',
		// 			seriesIndex: 0,
		// 			dataIndex: index,
		// 		});
		// 		// 高亮指定的数据图形
		// 		chartMap.dispatchAction({
		// 			type: 'highlight',
		// 			seriesIndex: 0,
		// 			dataIndex: index + 1,
		// 		});
		// 		index++;
		// 		if (index > data.length - 1) {
		// 			index = -1;
		// 		}
		// 	}, 5000);
		// },

		//地图数据
		mapData_home() {
			const params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
			};
			this.$myApi.mapData_home(params).then((res) => {
				if (res.code == 200) {
					this.drawChart(res.data);
				}
			});
		},
		//前五大购货方（数量及金额）占比
		saleTop5_home() {
			const params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
			};
			this.$myApi.saleTop5_home(params).then((res) => {
				// var seriesData = [];
				// var xAxisData = [];
				// res.data['购货方数量top5'].map((item) => {
				// 	if (seriesData.length < 5) {
				// 		let quantity = (item.quantity / 1000).toFixed(2);
				// 		seriesData.push(quantity);
				// 		xAxisData.push(item.name);
				// 	}
				// 	// xAxisData.push(item.name);
				// });
				// this.option5.series[0].data = seriesData;
				// this.option5.xAxis.data = xAxisData;
				// this.creatChart1('main5', 'option5');

				var seriesData2 = [];
				var xAxisData2 = [];

				res.data['购货方金额top5'].map((item) => {
					if (seriesData2.length < 5) {
						let amount = (item.amount / 10000).toFixed(2);
						// console.log(amount, 'amount');
						seriesData2.push(amount);
						xAxisData2.push(item.name);
					}
				});
				this.option6.series[0].data = seriesData2;
				this.option6.xAxis.data = xAxisData2;
				this.creatChart1('main6', 'option6');

				this.data7 = res.data;
			});
		},
		//预收款明细
		financeMonthlySale_home() {
			const params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
			};
			this.$myApi.financeMonthlySale_home(params).then((res) => {
				var seriesData = [];
				var legendData = [];
				var xAxisData = [];
				var main3Total = 0;
				console.log(222, res.data, Object.keys(res.data));
				Object.keys(res.data).forEach(function (key) {
					xAxisData.push(Number(key) + 1 + '月');
					legendData.push(key);
					if (res.data[key]) {
						seriesData.push((res.data[key] / 10000).toFixed(2));
						main3Total += Number(
							(res.data[key] / 10000).toFixed(2)
						);
					} else {
						seriesData.push(0);
					}
				});
				this.option3.series[0].data = seriesData;
				this.option3.xAxis[0].data = xAxisData;
				this.main3Total = main3Total.toFixed(2);
				// this.option3.legend.data = legendData;
				console.log(33, seriesData, legendData);
				this.creatChart1('main3', 'option3');
				this.data6 = res.data;
			});
		},
		//一天的销售额、现金流多少 按照品名和月统计
		saleGoodsReport_home() {
			const params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
			};
			this.$myApi.saleGoodsReport_home(params).then((res) => {
				var seriesData = [];
				var legendData = [];
				var xAxisData = [];
				Object.keys(res.data).forEach(function (key) {
					// console.log(key, res.data[key]);
					let data = [];
					let data2 = [];
					Object.keys(res.data[key]).forEach(function (key2) {
						// console.log(key2, res.data[key][key2]);
						data2.push(key2);
						if (res.data[key][key2] && res.data[key][key2].amount) {
							data.push(
								(res.data[key][key2].amount / 10000).toFixed(2)
							);
						} else {
							data.push(0);
						}
					});
					legendData.push(key);
					xAxisData = data2;
					// console.log('data', data);
					seriesData.push({
						name: key,
						type: 'line',
						stack: 'Total',
						smooth: true,

						showSymbol: false,
						label: {
							show: true,
							position: 'top',
						},

						emphasis: {
							focus: 'series',
						},
						data: data,
					});
				});
				this.option3.series = seriesData;
				this.option3.xAxis[0].data = xAxisData;
				this.option3.legend.data = legendData;
				console.log(33, seriesData, legendData);
				this.creatChart1('main3', 'option3');
				this.data6 = res.data;
			});
		},
		//自己的库存
		inventory_home() {
			const params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
			};
			this.$myApi.inventory_home(params).then((res) => {
				var data9 = 0;
				var seriesData = [];
				res.data.map((item) => {
					seriesData.push({ value: item.quantity, name: item.name });

					data9 += Number(item.quantity);
				});
				this.option4.series[0].data = seriesData;
				this.creatChart1('main4', 'option4');
				this.data5 = res.data;
				this.data9 = data9.toFixed(2);
			});
		},
		//进口国别的品种比例
		importGoodsProportion_home() {
			const params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
			};
			this.$myApi.importGoodsProportion_home(params).then((res) => {
				var seriesData = [];
				res.data.map((item) => {
					seriesData.push({ value: item.quantity, name: item.name });
				});
				this.option2.series[0].data = seriesData;
				this.creatChart1('main2', 'option2');
				this.data4 = res.data;
			});
		},
		//海关进口量
		customsImportQuantity_home() {
			const params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
			};
			this.$myApi.customsImportQuantity_home(params).then((res) => {
				this.data3 = res.data;
			});
		},
		//海关关税
		customsDuty_home() {
			const params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
			};
			this.$myApi.customsDuty_home(params).then((res) => {
				this.data2 = res.data;
			});
		},
		//采购合同相关数据
		purchaseContractData_home() {
			const params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
			};
			this.$myApi.purchaseContractData_home(params).then((res) => {
				this.purchaseContractData = res.data;
			});
		},
		//预收款明细
		advancePaymentDetail_home() {
			const params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
			};
			this.$myApi.advancePaymentDetail_home(params).then((res) => {
				var seriesData = [];
				var legendData = [];
				var xAxisData = [];
				var main7Total = 0;
				Object.keys(res.data).forEach(function (key) {
					xAxisData.push(key);
					legendData.push(key);
					if (res.data[key]) {
						seriesData.push((res.data[key] / 10000).toFixed(2));
						main7Total += Number(
							(res.data[key] / 10000).toFixed(2)
						);
					} else {
						seriesData.push(0);
					}
				});
				this.option7.series[0].data = seriesData;
				this.option7.xAxis[0].data = xAxisData;
				this.main7Total = main7Total.toFixed(2);
				// this.option3.legend.data = legendData;
				console.log(33, seriesData, legendData);
				this.creatChart1('main7', 'option7');
			});
		},
		//滚动数据
		saleContractData_home() {
			const params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
			};
			this.$myApi.saleContractData_home(params).then((res) => {
				this.saleContractData = res.data;
			});
		},
		//销售外标
		saleForeignQuantity_home() {
			const params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
			};
			this.$myApi.saleForeignQuantity_home(params).then((res) => {
				this.data8 = res.data;
			});
		},
		//客户定购后的欠款情况
		customerDebt_home() {
			const params = {
				beginDate: this.beginDate,
				endDate: this.endDate,
			};
			this.$myApi.customerDebt_home(params).then((res) => {
				var seriesData = [];
				res.data.map((item) => {
					seriesData.push({ value: item.amount, name: item.name });
				});
				this.data1 = res.data;

				this.option.series[0].data = seriesData;
				this.creatChart1('main', 'option');
			});
		},
	},
};
</script>
<style scoped>
.itemWrap {
	overflow: auto;
	height: 2.08rem;
	width: 100%;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
}
.itemWrap::-webkit-scrollbar {
	display: none;
}
.item {
	color: #fff;
	/* margin-bottom: 1rem; */
}
.block2 .chartMap {
	width: 100%;
	height: 5.65rem;
	/* height: 6.28rem; */
	/* background: url('@\assets\icon\bg.png') no-repeat; */
	background-size: 100% 100%;
}
.chart3 {
	/* color: #1b2c15; */
	height: 2.62rem;
	width: 100%;
}
.chart1 {
	height: 2.79rem;
	width: 100%;
}
.chart2 {
	height: 2.56rem;
	width: 100%;
}
.chart6 {
	height: 2.5rem;
	width: 100%;
}
.title {
	font-size: 0.35rem;
	font-family: SimHei;
	font-weight: 400;
	color: #ffffff;
	margin-bottom: 0.1rem;
}
.title2 {
	font-size: 0.2rem;
	color: rgb(255, 255, 255);
	font-weight: 700;
	margin-bottom: 0.2rem;
}
.title3 {
	font-size: 0.1rem;
	color: rgb(255, 255, 255);
	/* font-weight: 700; */
	position: absolute;
	right: 0.2rem;
}
.text1 {
	font-size: 0.2rem;
	color: #ffffff;
		margin-right: 0.2rem;
	/* margin-bottom: 0.1rem; */
}
.progress_text1 {
	/* color: #f82b7e; */
	font-size: 0.265rem;

}
.block2 {
	background: #040f33;
	padding: 0.2rem;
	display: inline-block;
	width: 9.5rem;
	box-sizing: border-box;
	margin-bottom: 0.2rem;
	margin-left: 0.2rem;
}
.block1 {
	background: #040f33;
	padding: 0.2rem;
	display: inline-block;
	width: 3.7rem;
	box-sizing: border-box;
	margin-bottom: 0.2rem;
}
.block3 {
	background: #040f33;
	padding: 0.2rem;
	display: inline-block;
	width: 5.02rem;
	/* height: 3rem; */
	box-sizing: border-box;
	margin-bottom: 0.2rem;
	margin-left: 0.2rem;
}
.block4 {
	background: #040f33;
	padding: 0.2rem;
	display: inline-block;
	width: 7.5rem;
	box-sizing: border-box;
	margin-left: 0.2rem;
	position: relative;
}
.block5 {
	background: #040f33;
	padding: 0.2rem;
	display: inline-block;
	width: 7rem;
	box-sizing: border-box;
	margin-left: 0.2rem;
	position: relative;
	left: -2rem;
}
.progress {
	width: 2.5rem;
	height: 0.18rem;
	position: relative;
}
.content {
	min-height: 100vh;
	width: 100vw;
	overflow-x: hidden;
	background: #000;
	padding: 0.2rem;
	box-sizing: border-box;
}
</style>
<style>
/* .el-progress-bar__inner {
  border-radius: 0 !important;
  height: 0.18rem !important;
}
.el-progress-bar__outer {
  border-radius: 0 !important;
  background-color: inherit !important;
  height: 0.18rem !important;
} */
html {
	/* 移动端设计图 */
	/* 100vw = 750px
        1px = 100/750 vw  =0.13333vw
        100px = 13.33vw
        1rem = 1font-size
        font-size: 13.33vw 以100px为单位
        font-size不能小于12px 否则qq uc浏览器等会按照12px计算
     */
	/* font-size: 13.33vw; */

	/* 网页端设计图 */
	/* 100vw = 1920px
        1px = 100/1920 vw  =0.052083333333vw
        100px = 5.20vw
        1rem = 1font-size
        font-size: 5.20vw 以100px为单位
        font-size不能小于12px 否则qq uc浏览器等会按照12px计算
     */

	font-size: 5.2vw;
}
</style>
